<template>
  <div class="page">
    <van-nav-bar left-arrow @click-left="onClickBack" />
    <div class="title">
      <van-image :src="require('@/assets/images/meetingManage/meetingSetBg.png')" alt="" width="100px" />
      <div class="title-content">
        <span class="title1">会议室设置</span>
        <span class="title2">提升会议效率30%的秘诀!</span>
      </div>
    </div>
    <div class="list">
      <div class="list-item" v-for="(item, index) in list" :key="item.id">
        <van-form @submit="onSubmit(index)" :readonly="item.readonly">
          <van-cell-group inset class="my-form">
            <div class="list-item-title">
              <van-field v-model="item.room" name="room" placeholder="会议室门号"
                :rules="[{ required: true, message: '请填写会议室门号' }]" />
              <van-image :src="require('@/assets/images/meetingManage/save.png')" alt="" width="20px"
                @click="handleOpenEdite(item, index,true)" v-show="!item.readonly" />
              <van-image :src="require('@/assets/images/meetingManage/Edit.png')" alt="" width="20px"
                @click="handleOpenEdite(item, index,false)" v-show="item.readonly" />
            </div>
            <!-- <van-divider /> -->


            <van-field v-model="item.numberPeople" name="numberPeople" label="可容纳人数" placeholder="可容纳人数"
              :rules="[{ required: true, message: '请填写可容纳人数' }]" />
            <van-field v-model="item.place" type="place" name="place" label="地点" placeholder="地点"
              :rules="[{ required: true, message: '请填写地点' }]" />
            <van-field v-model="item.numberWeight" name="numberWeight" label="序号权重" placeholder="序号权重"
              :rules="[{ required: true, message: '请填写序号权重' }]" />

            <!-- <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div> -->
          </van-cell-group>
        </van-form>
      </div>

    </div>
    <van-image :src="require('@/assets/images/meetingManage/add.png')" alt="" width="60px" class="add-meeting"
      @click="handleAddMeeting()" />
  </div>
</template>
<script>
import Vue from "vue";
import { Image, Divider, Toast } from "vant";
Vue.use(Toast);
Vue.use(Divider);
Vue.use(Image);

export default {
  name: "meetingSet",
  data() {
    return {

      list: [
        {
          room: "4楼4号会议室",
          numberPeople: "20",
          place: "4楼4号会议室",
          readonly: true,
          isSave:true,
          id: 1,
          saveEditeUrl: "require('@/assets/images/meetingManage/Edit.png')",
          icon: require("@/assets/images/meetingManage/meetingSet.png"),
        },
        {
          room: "4楼4号会议室",
          place: "4楼4号会议室",
          id: 2,
          readonly: true,
          isSave: true,
          saveEditeUrl: "require('@/assets/images/meetingManage/Edit.png')",
          icon: require("@/assets/images/meetingManage/authSet.png"),
        },
        {
          room: "4楼4号会议室",
          place: "4楼4号会议室",
          id: 3,
          readonly: true,
          isSave: true,
          saveEditeUrl: "require('@/assets/images/meetingManage/Edit.png')",
          icon: require("@/assets/images/meetingManage/labelSet.png"),
        }
      ],
    }
  },
  methods: {
    onClickBack() {
      this.$router.go(-1);
    },
    handleOpenEdite(item, index) {
      const newList = [...this.list]
      if (!item.readonly){
        this.onSubmit(index)
        Toast.success('保存成功');
        if (!item.isSave) {
          newList[index].isSave  = true;
        }
      }
      
      newList[index].readonly = !item.readonly;
      this.list = [...newList];
      console.log("this.list", this.list);
      // debugger
      // this.$nextTick(() => {
      //   this.list = [...newList];
      // });
    },
    onSubmit(index) {
      console.log("提交", this.list[index]);
    },
    handleAddMeeting(){
      this.list.push({
        room: "",
        place: "",
        id: this.list.length,
        readonly: true,
        saveEditeUrl: "require('@/assets/images/meetingManage/Edit.png')",
        icon: require("@/assets/images/meetingManage/meetingSet.png"),
     })
    }
  }
}
</script>
<style scoped lang="less">
.page {
  position: relative;
  background: linear-gradient(to top right, #edf7ff87, #d8ebfc75, #b4d2fa);
.add-meeting{
  position: fixed;
  top: 40%;
  right: 10px;
}
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    .title-content {
      display: flex;
      flex-direction: column;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-style: normal;

      .title1 {
        font-size: 20px;
        color: #2C70F4;
      }

      .title2 {
        font-size: 14px;
        color: #445D79;
      }
    }
  }

  .list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: -19px;

    .list-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px;
      border-radius: 10px;
      font-family: PingFangSC, PingFang SC;
      box-sizing: border-box;
      background: #FFFFFF;
      box-shadow: -4px 2px 0px 1.3px rgb(150 180 255 / 10%);

      .list-item-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-right: 15px;
      }

      .my-form {
        margin: 0 -10px;
      }

      //  ::deep .van-cell-group--inset{
      //   margin: 0 10px;
      //   }
    }
  }

}
</style>